Your IP : 216.73.216.86
<?php include('head.php'); ?>
<?php
// Get schedule ID from URL parameter
$schedule_id = $_GET['id'];
// Include database connection and TaskService class
require_once '../../Classes/Database.php';
require_once '../../Service/TaskService.php';
require_once '../../Classes/System.php';
require_once '../../Service/ServiceService.php';
// Create ServiceService instance
$serviceService = new ServiceService();
$services = $serviceService->getAllServicesForDropdown();
// Create TaskService instance
$taskService = new TaskService();
$System = new System();
$schedule_id = $System->decryptData($_GET['id']);
// show error if the provided id is not valid with Swal alert
if (!$schedule_id) {
echo "<script>
Swal.fire({
title: 'Invalid Schedule ID',
text: 'The URL parameter is invalid. Please go back and try again.',
icon: 'error',
confirmButtonText: 'OK'
}).then(() => {
window.location.href = 'viewschedules.php';
});
</script>";
exit;
}
// Fetch tasks from the database that belong to the given schedule
$tasks = $taskService->getTasksByScheduleId($schedule_id);
?>
<div class="main-content">
<div class="container-fluid">
<div class="page-header">
<div class="row align-items-end">
<div class="col-lg-8">
<div class="page-header-title">
<i class="ik ik-layers bg-blue"></i>
<div class="d-inline">
<h5>View Tasks</h5>
<span>View tasks for the selected schedule</span>
</div>
</div>
</div>
<div class="col-lg-4">
<nav class="breadcrumb-container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="../../index.html"><i class="ik ik-home"></i></a>
</li>
<li class="breadcrumb-item">
<a href="#">Schedules</a>
</li>
<li class="breadcrumb-item active" aria-current="page">View Tasks</li>
</ol>
</nav>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<a href="javascript:history.back()" class="btn btn-outline-primary">Back</a>
</div>
<div class="card-header-right">
<!-- <a href="createtasks.php?schedule_id=-->
<?php //echo $schedule_id; ?><!--" class="btn btn-outline-primary">Add Task</a>-->
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#createTaskModal"><i class="ik ik-plus"></i>Create Task
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="createTaskModal" role="dialog" aria-labelledby="exampleModalCenterLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl mt-0 mb-0" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterLabel">Add a Task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form id="tasksForm">
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<div class="col-sm-9">
<input type="text" id="schedule-id" name="schedule-id" class="form-control"
value="<?php echo $schedule_id; ?>" <?php echo isset($schedule_id) ? 'readonly' : ''; ?>
hidden>
</div>
</div>
<div class="form-group row">
<label for="service-id" class="col-sm-3 col-form-label">Service:</label>
<div class="col-sm-9">
<select id="service-id" name="service-id" class="form-control select2"></select>
</div>
</div>
<input type="hidden" name="current-user" value="<?php echo $_SESSION['user_id']; ?>">
<script>
document.addEventListener('DOMContentLoaded', function () {
var services = <?php echo json_encode($services); ?>;
var serviceSelect = document.getElementById("service-id");
services.forEach(service => {
var option = document.createElement("option");
option.value = service.id; // Use service ID as value
option.textContent = service.name; // Show service name
serviceSelect.appendChild(option);
});
});
</script>
<div class="form-group row">
<label for="frequency" class="col-sm-3 col-form-label">Frequency:</label>
<div class="col-sm-9">
<select id="frequency" name="frequency" class="form-control select2 frequencySelect">
<option value="daily">Daily</option>
<option value="3x/week">3x/week</option>
</select>
</div>
</div>
</div>
<input type="text" id="dates" name="dates" hidden>
<div class="col-md-6">
<div class="d-flex flex-column">
<h1>Select Dates</h1>
<div class="date-picker"></div>
<div class="date-time-container"></div>
</div>
</div>
</div>
</form>
<div id="message" class="mt-3"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" form="tasksForm" class="btn btn-primary">Add Task</button>
</div>
</div>
</div>
</div>
<script src="../../node_modules/flatpickr/dist/flatpickr.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
initializeFlatpickr();
});
function initializeFlatpickr() {
$('.date-picker').each(function () {
flatpickr(this, {
dateFormat: "Y-m-d",
mode: "multiple",
inline: true,
onChange: function (selectedDates, dateStr, instance) {
const container = $(instance.element).closest('.d-flex').find('.date-time-container');
const existingDateTimePairs = [];
container.find('.form-group').each(function () {
const date = $(this).find('input[type="text"]').first().val();
const time = $(this).find('.time-picker').val();
existingDateTimePairs.push({ date, time });
});
selectedDates.sort((a, b) => new Date(a) - new Date(b));
container.empty();
selectedDates.forEach((date) => {
const formattedDate = formatDate(date);
let timeValue = '';
existingDateTimePairs.forEach(pair => {
if (pair.date === formattedDate) {
timeValue = pair.time;
}
});
container.append(`
<div class="form-group mb-2 mr-sm-2 mb-sm-0">
<input type="text" class="form-control" value="${formattedDate}" readonly>
<input type="text" class="form-control time-picker" placeholder="Select Time" value="${timeValue}">
</div>
`);
});
initializeTimePicker(container);
}
});
});
}
function initializeTimePicker(container) {
container.find('.time-picker').each(function () {
flatpickr(this, {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
});
}
function formatDate(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
}
document.getElementById('tasksForm').addEventListener('submit', function (event) {
event.preventDefault();
// Collect date-time pairs
const dateTimePairs = [];
document.querySelectorAll('.date-time-container .form-group').forEach(group => {
const date = group.querySelector('input[type="text"]').value;
const time = group.querySelector('.time-picker').value;
dateTimePairs.push({ date, time });
});
// Set the dates field value
document.getElementById('dates').value = JSON.stringify(dateTimePairs);
// Validate dates
if (dateTimePairs.length === 0) {
Swal.fire({
title: 'Error',
text: 'Please select dates',
icon: 'error',
confirmButtonText: 'OK'
});
return;
}
// Collect form data
const formData = new FormData(this);
// Send form data via fetch
fetch('submit_task.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
// Reset form fields
document.getElementById('service-id').value = '';
document.getElementById('frequency').value = '';
document.querySelector('.date-time-container').innerHTML = '';
// Show success message
Swal.fire({
title: 'Task Created',
text: data,
icon: 'success',
confirmButtonText: 'OK'
}).then(() => {
location.reload();
});
})
.catch(error => {
// Show error message
Swal.fire({
title: 'Error',
text: error,
icon: 'error',
confirmButtonText: 'OK'
});
});
});
function populateRegion() {
var selectedService = document.getElementById('service-name').value;
var selectedServiceData = <?php echo json_encode($services); ?>;
var regionSelect = document.getElementById('region');
regionSelect.innerHTML = '';
selectedServiceData.forEach(service => {
if (service.name === selectedService) {
var regionOption = document.createElement('option');
regionOption.value = service.region;
regionOption.textContent = service.region;
regionSelect.appendChild(regionOption);
}
});
}
populateRegion();
</script>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="card-header-left">
<h3>View Tasks</h3>
</div>
<div class="card-header-right">
<!-- <button id="download_excel" class="btn btn-success">Export to Excel</button>-->
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<div class="col-sm-3">
<label for="filter_service" class="col-form-label">Filter Service Name:</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="filter_service">
</div>
</div>
<div class="form-group row">
<div class="col-sm-2">
<div class="row">
<div class="col-sm-3">
<label for="filter_region" class="col-form-label">Filter Region:</label>
</div>
<div class="col-sm-9">
<select class="form-control" id="filter_region">
<option value="">All Regions</option>
<?php
// Collect unique regions
$uniqueRegions = [];
foreach ($services as $service) {
if (!in_array($service->region, $uniqueRegions)) {
$uniqueRegions[] = $service->region;
?>
<option value="<?= htmlspecialchars($service->region) ?>"><?= htmlspecialchars($service->region) ?></option>
<?php
}
}
?>
</select>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-2">
<label for="filter_finished" class="col-form-label">Filter
Finished:</label>
</div>
<div class="col-sm-9">
<select class="form-control" id="filter_finished">
<option value="">All</option>
<option value="Not Finished">Not Finished.</option>
<option value="Finished.">Finished.</option>
</select>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-2">
<label for="filter_assigned" class="col-form-label">Filter
Assigned:</label>
</div>
<div class="col-sm-9">
<select class="form-control" id="filter_assigned">
<option value="">All</option>
<option value="Not Assigned">Not Assigned.</option>
<option value="Assigned.">Assigned.</option>
</select>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-sm-2">
<label for="filter_public" class="col-form-label">Filter Public:</label>
</div>
<div class="col-sm-8">
<select class="form-control" id="filter_public">
<option value="">All</option>
<option value="Not Public">Not Public</option>
<option value="Public.">Public.</option>
</select>
</div>
</div>
</div>
<div class="col-sm-2">
<button type="button" id="reset_filters" class="btn btn-icon btn-outline-danger"><i class="ik ik-refresh-cw"></i></button>
</div>
</div>
<!-- Add other filters as per your requirements -->
</div>
</div>
<table id="superadvanced_table" class="table">
<thead>
<tr>
<th>ID</th>
<th>Service Name</th>
<th>Region</th>
<th>Frequency</th>
<th>Created By</th>
<th>Created At</th>
<th>Finished</th>
<th>Assigned</th>
<th>Public Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php foreach ($tasks as $task): ?>
<tr>
<td><?php echo 'TSK-000' . $task->id; ?></td>
<td><?php echo $task->service_name; ?></td>
<td><?php echo $task->region; ?></td>
<td><?php echo $task->frequency; ?></td>
<td><?php echo $task->created_by_name; ?></td>
<td><?php echo date('F j, Y, g:i a', strtotime($task->created_at)); ?></td>
<td><?php echo($task->finished ? '<label class="badge badge-success">Finished.</label>' : '<label class="badge badge-warning">Not Finished</label>'); ?></td>
<td><?php echo($task->is_assigned ? '<label class="badge badge-success">Assigned.</label>' : '<label class="badge badge-warning">Not Assigned</label>'); ?></td>
<td><?php echo($task->isPublic ? '<label class="badge badge-warning">Public.</label>' : '<label class="badge badge-success">Not Public</label>'); ?></td>
<td>
<a href="viewtask.php?id=<?php echo $System->encryptData($task->id); ?>"
class="btn btn-primary">View Details</a>
<?php if ($task->is_assigned == 0): ?>
<button class="btn btn-danger delete-task"
data-task-id="<?php echo $System->encryptData($task->id); ?>">Remove
</button>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
// Initialize DataTable
var table = $('#superadvanced_table').DataTable({
// Configure initial settings if needed
});
// Function to save filters to localStorage
function saveFilters() {
var filters = {
service: $('#filter_service').val(),
region: $('#filter_region').val(),
finished: $('#filter_finished').val(),
assigned: $('#filter_assigned').val(),
public: $('#filter_public').val()
};
localStorage.setItem('superadvancedTableFilters', JSON.stringify(filters));
}
// Function to apply saved filters
function applyFilters() {
var filters = JSON.parse(localStorage.getItem('superadvancedTableFilters'));
if (filters) {
$('#filter_service').val(filters.service).trigger('keyup');
$('#filter_region').val(filters.region).trigger('change');
$('#filter_finished').val(filters.finished).trigger('change');
$('#filter_assigned').val(filters.assigned).trigger('change');
$('#filter_public').val(filters.public).trigger('change');
}
}
// Function to reset filters
function resetFilters() {
$('#filter_service').val('').trigger('keyup');
$('#filter_region').val('').trigger('change');
$('#filter_finished').val('').trigger('change');
$('#filter_assigned').val('').trigger('change');
$('#filter_public').val('').trigger('change');
localStorage.removeItem('superadvancedTableFilters');
table.search('').columns().search('').draw();
}
// Check previous page and apply filters if necessary
function checkPreviousPage() {
var previousUrl = sessionStorage.getItem('previousUrl');
if (!previousUrl || !previousUrl.includes('viewtask.php')) {
resetFilters();
} else {
applyFilters();
}
}
checkPreviousPage();
// Add custom filters
$('#filter_service').on('keyup', function () {
table.column(1).search($(this).val()).draw();
saveFilters();
});
$('#filter_finished').on('change', function () {
table.column(6).search($(this).val()).draw();
saveFilters();
});
$('#filter_region').on('change', function () {
table.column(2).search($(this).val()).draw();
saveFilters();
});
$('#filter_assigned').on('change', function () {
table.column(7).search($(this).val()).draw();
saveFilters();
});
$('#filter_public').on('change', function () {
table.column(8).search($(this).val()).draw();
saveFilters();
});
// Add reset filters button functionality
$('#reset_filters').on('click', function () {
resetFilters();
});
// Apply saved filters on initial load
applyFilters();
});
</script>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var deleteButtons = document.querySelectorAll('.delete-task');
deleteButtons.forEach(function (button) {
button.addEventListener('click', function () {
var taskId = button.getAttribute('data-task-id');
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'delete_task.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseText === 'success') {
Swal.fire({
title: 'Deleted!',
text: 'Your task has been deleted.',
icon: 'success'
}).then(() => {
window.location.reload();
});
} else {
Swal.fire({
title: 'Error!',
text: xhr.responseText,
icon: 'error'
});
}
}
};
xhr.send('taskId=' + taskId);
}
});
});
});
});
</script>
<?php include('footer.php'); ?>